<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书添加</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
  <h2>添加图书</h2>
  <form>
    书名: <input type="text" name="name" id="name"><br/>
    作者: <input type="text" name="author" id="author"><br/>
    价格: <input type="number" name="price" id="price"><br/>
    <input type="submit" value="提交" id="btn">
  </form>

  <script>
    const btn = document.getElementById('btn')
    btn.onclick = async (e) => {
      // 阻止事件的默认行为 => 不要提交表单
      e.preventDefault()

      // 收集数据
      const name = document.getElementById('name').value
      const author = document.getElementById('author').value
      const price = document.getElementById('price').value
      // 提交添加图书的ajax请求
      await axios({
        url: 'http://localhost:8080/book',
        method: 'POST',
        data: {name, author, price}
      })
      // 成功后, 跳转到books页面
      window.location = '/books.html'
    }

  </script>
</body>
</html>